<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VUE测试</title>
        <script src="../../js/vue.js" type="text/javascript"></script>
        <style type="text/css">
            .line {
                border-bottom: 1px #000000 solid;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div>
                <button @click="addNode">添加 {{ appList.length }}</button>
                <button @click="buildJSON">构建json</button>
                <button @click="buildArray">构建Array</button>
            </div>
            <div class="line" v-for="(item, index) in appList">
                {{ index }} - {{ item.nodeName }} <button @click="addChildNode(index + 1)">+</button>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                chars: 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678',
                appList: [],
                jsono: {

                },
                tempArr: []
            },
            methods: {
                addNode: function() {
                    var o = {
                        id: this.uniqueId(5),
                        nodeName: "节点" + this.randomStr(1)
                    }
                    this.appList.push(o);
                },
                addChildNode: function(index) {
                    var o = {
                        id: this.uniqueId(5),
                        nodeName: "节点" + this.randomStr(1)
                    }
                    this.appList.splice(index, 0, o);
                },
                randomStr: function(len) {
                    len = len || 32;
                    let maxPos = this.chars.length;
                    let pwd = [];
                    for (let i = 0; i < len; i++) {
                        pwd.push(this.chars.charAt(Math.floor(Math.random() * maxPos)));
                    }
                    return pwd.join('');
                },
                uniqueId: function(n) {
                    var random = function() { // 生成10-12位不等的字符串
                        return Number(Math.random().toString().substr(2)).toString(36); // 转换成十六进制
                    }
                    var arr = [];

                    function createId() {
                        var num = random();
                        var _bool = false;
                        arr.forEach(v => {
                            if (v === num) _bool = true;
                        });
                        if (_bool) {
                            createId();
                        } else {
                            arr.push(num);
                        }
                    }
                    var i = 0;
                    while (i < n) {
                        createId();
                        i++;
                    }
                    return arr.join('');
                },
                buildJSON: function() {
                    var backList = this.appList;
                    var isFirst = true;
                    var preId;
                    backList.forEach((item, index) => {
                        if (isFirst) {
                            preId = item.id;
                            isFirst = false;
                            this.jsono = item;
                        } else {
                            this.add(preId, item);
                            preId = item.id;
                        }
                    });
                    console.log(this.jsono);
                },
                buildArray: function() {
                    this.buildArray2(this.jsono);
                    console.log(this.tempArr);
                },
                buildArray2: function(obj) {
                    var _obj = obj;
                    this.tempArr.push(_obj);
                    if (_obj.nextNode) {
                        this.buildArray2(_obj.nextNode);
                        delete _obj.nextNode;
                    }
                },
                findById: function(id, obj) {
                    if (obj.id == id) {
                        return obj;
                    } else {
                        return this.findById(id, obj.nextNode);
                    }
                },
                add: function(preId, obj) {
                    var _item = this.findById(preId, this.jsono);
                    if (_item) {
                        _item.nextNode = obj;
                    }
                }
            }
        });
    </script>
</html>
